<template>
  <ScaleBox :width="1920"
            :height="1080"
            bgc="transparent"
            :delay="100">
    <div class="w-full h-full py-4 px-4">
      <div class="flex cart-box1">
        <!--库存信息-->
        <Inventory/>
        <!--物料需求信息-->
        <materialRequirement/>
      </div>

      <div class="flex cart-box2">
        <!--订单交易信息-->
        <orderTransaction/>
        <!--成品库存信息-->
        <finishedProduct/>
      </div>
    </div>
  </ScaleBox>

</template>

<script setup>
import '@/style/tailwind.css'
import ScaleBox from 'vue3-scale-box'
import '@/assets/font/iconfont.css'

import finishedProduct from './components/finishedProduct.vue'
import Inventory from './components/Inventory.vue'
import materialRequirement from './components/materialRequirement.vue'
import orderTransaction from './components/orderTransaction.vue'

</script>
<style lang="scss">
.el-card__body {
  height: 100%;
}

.cart-box1 {
  margin-bottom: 20px;
  height: 47%;
}

.cart-box2 {
  margin-bottom: 20px;
  height: 50%;
}

.el-card {
  border-radius: 20px;
}


</style>


